<template>
  <div class="competieResultsAdd">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      添加赛事成绩
      <div slot="right" @click="confirm">确定</div>
    </x-header>

    <group>
      <x-input title="赛事名称" v-model="scoreForm.name" placeholder="请输入赛事名称"></x-input>
      <datetime
        title="比赛时间"
        class="dataBox"
        placeholder="请选择时间"
        v-model="scoreForm.time"
        start-date="1970-01-01"
        end-date="2019-12-30"
        format="YYYY-MM-DD"
      ></datetime>
      <x-input title="比赛成绩" v-model="scoreForm.grade" placeholder="请输入比赛成绩"></x-input>
      <x-address
        title="比赛地点"
        v-model="scoreForm.address"
        :list="addressData"
        @on-shadow-change="onShadowChange"
        placeholder="请选择比赛地址"
        class="addressBox"
      ></x-address>

    </group>
  </div>
</template>

<script>
import { XHeader, Datetime, Group, XInput, XAddress, ChinaAddressV4Data } from 'vux'
import Upload from '../components/Uploader'
export default {
  components: {
    XHeader,
    Datetime,
    Group,
    XInput,
    XAddress,
    Upload
  },
  data() {
    return {
      scoreForm: {
        name: '',
        grade: '',
        time: '',
        address: [],
      },
      sexList: [['男', '女', '不告诉你']],
      addressData: ChinaAddressV4Data,
    }
  },
  methods: {
    confirm() {
        this.$http.get('url', {
          params: {
            newForm: this.scoreForm
          }
        }).then(res => {
          // 成功相应
        })
      this.$router.back()
    },
    onShadowChange(ids, names) {
      console.log(ids, names)
    },
  }
}
</script>

<style lang="less" scoped>
.competieResultsAdd {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
    .vux-header-right {
      color: #000;
    }
  }
  /deep/.addressBox {
    .vux-cell-placeholder {
      color: #757575;
    }
    .vux-cell-value {
      color: #000;
    }
    .weui-cell__ft {
      padding-right: 0;
    }
    .weui-cell__ft:after {
      content: none;
    }
  }
  /deep/.dataBox {
    .vux-cell-placeholder {
      color: #757575;
    }
    .vux-cell-value {
      color: #000;
    }
    .weui-cell__ft {
      padding-right: 0;
    }
    .weui-cell__ft:after {
      content: none;
    }
  }

  /deep/.weui-input {
    text-align: right;
  }
  /deep/.weui-cells {
    margin-top: -2px;
  }
}
</style>